<!--  -->
<template>
  <div class="justify-center flex course1">
    <div class="w-[940px] bg-[#292a2c] p-4">
      <div
        v-for="(item, index) in courseList"
        :key="index"
        class="mb-10 cursor-pointer border-b border-white/50 pb-2 relative"
        @click="router.push(item.path)"
      >
        <div class="text-xl">{{ item.name }}</div>
        <div class="text-white/50 pl-3 mb-[120px]">
          通过PS和AI软件，帮助你在十分钟内快速制作出合理，精准，写实的特效
        </div>
        <div class="flex space-x-4 py-3 absolute top-[3rem]">
          <img
            :src="item1"
            v-for="(item1, index1) in item.photos"
            :key="index1"
            alt=""
            class="rounded-md hover:scale-150 transition-all"
          />
        </div>
        <div class="pl-3 flex text-white/30">
          <div class="mr-5">老师：夏三七</div>
          <div class="">班级：特效速成班</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const courseList = ref([
  {
    name: 'Ps Ai 0 Special Effects 01',
    path: 'PsAi01',
    photos: [
      new URL('../Course/Ps Ai 0 Special Effects 01/img/001.png', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 01/img/002.png', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 01/img/39.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 01/img/40.jpg', import.meta.url).href
    ],
    type: ''
  },
  {
    name: 'Ps Ai 0 Special Effects 02',
    path: 'PsAi02',
    photos: [
      new URL('../Course/Ps Ai 0 Special Effects 02/img/28.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 02/img/29.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 02/img/30.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 02/img/31.jpg', import.meta.url).href
    ],
    type: ''
  },
  {
    name: 'Ps Ai 0 Special Effects 03',
    path: 'PsAi03',
    photos: [
      new URL('../Course/Ps Ai 0 Special Effects 03/img/11.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 03/img/13.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 03/img/14.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 03/img/15.jpg', import.meta.url).href
    ],
    type: ''
  },
  {
    name: 'Ps Ai 0 Special Effects 04',
    path: 'PsAi04',
    photos: [
      new URL('../Course/Ps Ai 0 Special Effects 04/img/32.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 04/img/33.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 04/img/QQ20241012-195140.png', import.meta.url)
        .href
    ],
    type: ''
  },
  {
    name: 'Ps Ai 0 Special Effects 05',
    path: 'PsAi05',
    photos: [
      new URL('../Course/Ps Ai 0 Special Effects 05/img/20.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 05/img/21.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 05/img/22.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 05/img/25.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 05/img/24.jpg', import.meta.url).href
    ],
    type: ''
  },
  {
    name: 'Ps Ai 0 Special Effects 06',
    path: 'PsAi06',
    photos: [
      new URL('../Course/Ps Ai 0 Special Effects 06/img/16.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 06/img/17.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 06/img/18.jpg', import.meta.url).href,
      new URL('../Course/Ps Ai 0 Special Effects 06/img/19.jpg', import.meta.url).href
    ],
    type: ''
  },
  {
    name: 'Ai photo retouching course 01',
    path: 'AiRetouching01',
    photos: [
      new URL('../Course/Ai photo retouching course 01/img/12.jpg', import.meta.url).href,
      new URL('../Course/Ai photo retouching course 01/img/34.jpg', import.meta.url).href,
      new URL('../Course/Ai photo retouching course 01/img/42.jpg', import.meta.url).href
    ],
    type: ''
  },
  {
    name: 'Ai photo retouching course 02',
    path: 'AiRetouching02',
    photos: [
      new URL('../Course/Ai photo retouching course 02/img/02.jpg', import.meta.url).href,
      new URL('../Course/Ai photo retouching course 02/img/04.jpg', import.meta.url).href,
      new URL('../Course/Ai photo retouching course 02/img/06.jpg', import.meta.url).href,
      new URL('../Course/Ai photo retouching course 02/img/44.jpg', import.meta.url).href
    ],
    type: ''
  }
])
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
</style>
